<template>
	<div class="withdrawals">
		<div class="header">
			<img @click="back" src="../../assets/nav_back.png"/>
			<span>实名认证</span>
			<span class="img"></span>
		</div>	
		
		<div class="inner" style="border: none;" >
			<span>真实姓名</span>
			<input type="text" name="" id="name" value="" placeholder="请输入您的真实姓名" v-model="name" />
		</div>
		
		<div class="inner" style="margin-top: 0.2667rem;" >
			<span>身份证号</span>
			<input type="text" name="" id="" maxlength="18"  value="" placeholder="请输入您的身份证号"  v-model="card"/>
		</div>
		
		<v-button buttonText='确定' :isActive='isActive' topNum='0.8rem' @toNext='login'></v-button>
	</div>
</template>

<script>
	import my from '@/api/my/index'
	import { toast,isIdCard } from '@/util/index'
	import Button from '@/components/Button'
	export default{
		data(){
			return{
				name:"",
				card:"",
				imgUrl:"",
				img:require("../../assets/verified_pic_add.png"),
			}
		},
		computed: {
			isActive: function () {
				if (isIdCard(this.card) && this.name) {
					return true
				} else {
					return false
				}
			}
		},
		mounted(){
			
	    },
	    components: {
			'v-button': Button
		},
		methods:{
			back(){
			    this.$router.push({ path: '/toAccountinformation' });
			},
		   login(){
		   		let senddata = {
					name:this.name,
					idCard:this.card,
					userId:window.localStorage.getItem("token"),
					plat:"mlj"
				}
				if (this.isActive) {
					my.doRealNameJson(senddata).then((data) => {
						if (data.data.code == 200) {
							this.$router.push({ path: '/my' })
						} else {
							toast(data.data.message)
						}
					})
				}
		   }
		    
		},
		beforeRouteEnter(to,from,next){
		    document.querySelector('title').innerText='谋略家'
		    next()
		}
		
		
	}
	
</script>

<style lang="less" scoped>
@import '../../less/config.less';
.withdrawals{
	color:white;
	.title{
		padding:0 @p30;
		color: #FF335B;
		height: 1.06666rem;
		line-height: 1.06666rem;
		font-size: @f24;
	}
	.header{
		padding:0 @p30;
		display: flex;
		justify-content:space-between;
		align-items: center;
		height:@hwrap;
		color:#fff;
		font-size:.48rem;
		img,.img{
			width: @p30;
			height: @p30;
		}
	}
	.photo{
		background: #141723;
		padding:@p30;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		span{
			font-size:@f32;	
			margin-right: 1.06493rem;
			width: 2rem;
		}
		p{
			padding: 0;
			height: auto;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			span{
				margin-top: @f26;
				width: auto;
				margin: 0;
			}
			img{
				width: 1.6rem;
				height: 1.6rem;
			}
		}
	}
	
	.inner{
		background: #141723;
		padding:0 @p30;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1.17333rem;
		input{
			flex: 1;
			color: white;
			font-size: @f32;
			height: 1.17333rem;
		}
		input::-webkit-input-placeholder {
			/* WebKit browsers*/
			color: #40495f;
		}
		input::-moz-placeholder {
			/* Mozilla Firefox 4 to 18*/
			color: #40495f;
		}
		input::-moz-placeholder {
			/* Mozilla Firefox 19+*/
			color: #40495f;
		}
		input:-ms-input-placeholder {
			/* Internet Explorer 10+*/
			color: #40495f;
		}
		select{
			flex: 1;
			color: #40495f;
			font-size: @f32;
			height: 1.17333rem;
			background:url(../../assets/arrow_fold.png)no-repeat right center;
			border: none;
			-webkit-appearance: none;
			option{
				color: #40495f;
				font-size: @f32;
			}
		}
		span{
			font-size:@f32;	
			margin-right: 0.48rem;
			width: 2rem;
		}
		p{
			font-size: @f32;
			padding:0px;
			color:white;
			span{
				margin-right: .3rem;
				font-weight: bold;
			}
		}
	}
	p{
		padding:0 @p30;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 1.36rem;
		color: @Color;
		font-size: @f32;
	}
	.login{
		
		width: 9.2rem;
		height: 1.17333rem;
		line-height: 1.17333rem;
		text-align: center;
		color: @Color;
		border: 2px @Color solid;
		margin: 1.0666rem auto 0;
		font-size: 0.48rem;
		border-radius: 0.08rem;
		
	}
	
}

</style>